<template>
  <div class="marginLR">
    <Header/>
    <el-row class="mb-5">
      <el-col :span="1">
        <div><span class="cursor-pointer hover:text-myRed-one" @click="goToIndex"> 首页</span> <span class="ml-1">/</span></div>
      </el-col>
      <el-col :span="1" class="ml-1">
        <div><span class="cursor-pointer hover:text-myRed-one"> 分类</span> <span>/</span></div>
      </el-col>
      <el-col :span="1" class="ml-1">
        <div class="text-gray-500"> 内容</div>
      </el-col>
    </el-row>
    <el-row class="relative">
      <el-col :span="8" class="relative">
        <img :src="normalPic">
        <div class="myBg" :style="topStyle" v-if="isShow"></div>
        <div class="maskTop" @mousemove="move" @mouseenter="mouseOver" @mouseleave="mounseLeave"></div>
        <el-row class="mt-4">
          <el-col :span="4" class="border-black" @mouseenter="changeImg(1)" :class="smallPicStyle===1?'border-2 border-solid':''">
            <img src="../assets/taobao/smallPic/1.jpg">
          </el-col>
          <el-col :span="4" :offset="1" class="border-black"  @mouseenter="changeImg(2)" :class="smallPicStyle===2?'border-2 border-solid':''">
            <img src="../assets/taobao/smallPic/2.jpg">
          </el-col>
          <el-col :span="4" :offset="1" class="border-black"  @mouseenter="changeImg(3)" :class="smallPicStyle===3?'border-2 border-solid':''">
            <img src="../assets/taobao/smallPic/3.jpg">
          </el-col>
          <el-col :span="4" :offset="1" class="border-black"  @mouseenter="changeImg(4)" :class="smallPicStyle===4?'border-2 border-solid':''">
            <img src="../assets/taobao/smallPic/4.jpg">
          </el-col>
          <el-col :span="4" :offset="1" class="border-black"  @mouseenter="changeImg(5)" :class="smallPicStyle===5?'border-2 border-solid':''">
            <img src="../assets/taobao/smallPic/5.jpg">
          </el-col>
        </el-row>
      </el-col>
      <div class="absolute left-1/3 ml-4 " v-show="r_show">
        <div class="relative overflow-hidden" style="width: 500px;height: 500px">
          <img  :src="bigPic" alt=""  class="z-30 absolute top-0 left-0" style="max-width: inherit" :style="r_img">
        </div>
      </div>
      <el-col :span="10" :offset="1">
        <div class="font-bold"> 【立省300 抢5折赢好礼】vivo iQOO Neo5高通骁龙870 5g游戏新品爱酷手机官方旗舰店iqooneo iq00neo5 neo5</div>
        <div class="bg-gray-100 pl-2">
          <div class="mt-6">
            <span class="mr-2">店铺优惠</span>
            <span class="font-bold text-myRed-one ml-10">购物满2件打8折，满3件7折</span>
          </div>
          <div class="mt-2">
            <span class="mr-2">促销价</span>
            <span class="font-bold text-red-600 text-3xl ml-12">￥2499.00</span>
          </div>
          <div class="mt-2">
            <span class="mr-2">原价</span>
            <span><del class="text-gray-500 text-sm ml-16">￥2599.00</del></span>
          </div>
        </div>
        <div class="mt-5">
          <span class="mr-3">配送至</span>
          <elui-china-area-dht placeholder="请选择配送地区"></elui-china-area-dht>
          <span class="ml-7" style="font-size: 13px">免邮费</span>
        </div>
        <div class="mt-6 border-dotted border-t border-b border-gray-400">
          <div class="pt-2 pb-2">
            <el-row>
              <el-col :span="5" :offset="3">
                <div class="border-solid border-r border-gray-400 text-sm">月销量<span
                    class="text-red-500 font-bold">1015</span></div>
              </el-col>
              <el-col :span="6" :offset="2">
                <div class="border-solid border-r border-gray-400 text-sm">累计评价<span
                    class="text-red-500 font-bold">57008</span></div>
              </el-col>
              <el-col :span="5" :offset="3">
                <div class="text-sm">月销量<span class="text-red-500 font-bold">1015</span></div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="mt-6 flex items-center">
          <span class="mr-4">颜色</span>
          <el-radio-group v-model="color" size="mini">
            <el-radio-button label="荣耀金"></el-radio-button>
            <el-radio-button label="冰银灰"></el-radio-button>
            <el-radio-button label="健康绿"></el-radio-button>
            <el-radio-button label="星耀白"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="mt-3 flex items-center">
          <span class="mr-4">套装</span>
          <el-radio-group v-model="suit" size="mini">
            <el-radio-button label="保护套装"></el-radio-button>
            <el-radio-button label="原厂电源"></el-radio-button>
            <el-radio-button label="存储套装"></el-radio-button>
            <el-radio-button label="8848套装"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="mt-3 flex items-center">
          <span class="mr-4">数量</span>
          <el-input-number v-model="count" :min="1" :max="10"></el-input-number>
        </div>
        <div class="mt-5 flex justify-center">
          <el-button type="danger" plain>立即购买</el-button>
          <el-button type="danger">加入购物车</el-button>
        </div>
        <div class="mt-10">
          <el-row>
            <el-col :span="3" :offset="1">
              <div class="text-gray-400" style="font-size: 10px">服务承诺</div>
            </el-col>
            <el-col :span="15">
              <div class="flex flex-wrap" style="font-size: 10px">
                <div class="mr-4">全国联保</div>
                <div class="mr-4">正品保证</div>
                <div class="mr-4">免举证退换货</div>
                <div class="mr-4">极速退款</div>
                <div class="mr-4">退货运费险</div>
                <div class="mr-4">七天无理由退换</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="text-gray-400 text-center" style="font-size: 10px">看了又看</div>
        <div class="mt-3 flex flex-col items-center relative">
          <img src="../assets/taobao/1/01.jpg">
          <div class="bg-white bg-opacity-70 absolute bottom-4 text-center" style="font-size: 10px;width: 160px">
            ¥1498.00
          </div>
          <div class="overflow-hidden whitespace-nowrap overflow-ellipsis cursor-pointer hover:text-myRed-one"
               style="font-size: 10px;width: 160px">【0点至高省450抢5折好礼】vivo iQOO U3千元5G大电池学生游戏智能手机老人机爱酷iq00官方旗舰店vivoiqoou3
          </div>
        </div>
        <div class="mt-3 flex flex-col items-center relative">
          <img src="../assets/taobao/1/01.jpg">
          <div class="bg-white bg-opacity-70 absolute bottom-4 text-center" style="font-size: 10px;width: 160px">
            ¥1498.00
          </div>
          <div class="overflow-hidden whitespace-nowrap overflow-ellipsis cursor-pointer hover:text-myRed-one"
               style="font-size: 10px;width: 160px">【0点至高省450抢5折好礼】vivo iQOO U3千元5G大电池学生游戏智能手机老人机爱酷iq00官方旗舰店vivoiqoou3
          </div>
        </div>
        <div class="mt-3 flex flex-col items-center relative">
          <img src="../assets/taobao/1/01.jpg">
          <div class="bg-white bg-opacity-70 absolute bottom-4 text-center" style="font-size: 10px;width: 160px">
            ¥1498.00
          </div>
          <div class="overflow-hidden whitespace-nowrap overflow-ellipsis cursor-pointer hover:text-myRed-one"
               style="font-size: 10px;width: 160px">【0点至高省450抢5折好礼】vivo iQOO U3千元5G大电池学生游戏智能手机老人机爱酷iq00官方旗舰店vivoiqoou3
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div style="width: 190px">
          <div class="pl-3 border-gray-400 border-dotted pt-3 pb-3 border" style="font-size: 10px">
            iqoo手机旗舰店
          </div>
          <div class="flex flex-col border border-dotted border-gray-400 border-t-0 items-center pl-4 pr-4 pt-3 pb-3">
            <div class="text-sm text-gray-400 font-bold">天猫十年老店</div>
            <el-row class="w-full justify-between pt-3">
              <el-col :span="5" style="font-size: 13px">
                <div>描 述</div>
                <div class="text-orange-700">4.8-</div>
              </el-col>
              <el-col :span="5" style="font-size: 13px">
                <div>服 务</div>
                <div class="text-orange-700">4.8-</div>
              </el-col>
              <el-col :span="5" style="font-size: 13px">
                <div>物 流</div>
                <div class="text-orange-700">4.8-</div>
              </el-col>
            </el-row>
            <div class="flex justify-around mt-4">
              <el-button size="mini" type="warning">进店逛逛</el-button>
              <el-button size="mini" type="info">收藏店铺</el-button>
            </div>
          </div>
          <div class="mt-2 pl-5 pt-2 pb-3 bg-title bg-no-repeat" style="font-size: 13px;">
            本店搜索
          </div>
          <div class=" pl-2 pr-2 pb-2 border border-t-0 border-dotted">
            <el-row>
              <el-col :span="7" style="font-size: 10px;line-height: 28px">
                关键字
              </el-col>
              <el-col :span="15" :offset="2">
                <el-input size="mini" placeholder="关键字"></el-input>
              </el-col>
            </el-row>
            <div class="text-center pt-5">
              <el-button type="info" size="mini">搜索</el-button>
            </div>
          </div>
          <div class="mt-3">
            <img src="../assets/taobao/1/2.jpg"/>
          </div>
          <div>
            <img src="../assets/taobao/1/3.jpg">
          </div>
          <div>
            <img src="../assets/taobao/1/4.jpg">
          </div>
          <div>
            <img src="../assets/taobao/1/4.jpg">
          </div>
        </div>
      </el-col>
      <el-col :span="16" :offset="1">
        <el-row class="border border-dotted ">
          <el-col :span="3">
            <div style="font-size: 12px;line-height: 48px" class="text-center cursor-pointer " @click="select=1"
                 :class="select===1?'text-orange-800 font-bold border-2':''">商品详细
            </div>
          </el-col>
          <el-col :span="3">
            <div style="font-size: 12px;line-height: 48px" class="text-center cursor-pointer" @click="select=2"
                 :class="select===2?'text-orange-800 font-bold border-2 ':''">规格参数
            </div>
          </el-col>
          <el-col :span="3">
            <div style="font-size: 12px;line-height: 48px" class="text-center cursor-pointer" @click="select=3"
                 :class="select===3?'text-orange-800 font-bold border-2 ':''">累计评价 <span
                class=text-blue-300>56785</span></div>
          </el-col>
        </el-row>
        <div v-if="select==1">
          <div class="flex items-center" style="height: 40px">
            <img src="../assets/taobao/16-16.png">
            <div class="ml-2" style="font-size: 10px">商品具有<span
                class="text-blue-500 cursor-pointer">中国强制性产品认证（CCC）编号</span>，符合国家CCC认证标准。
            </div>
          </div>
          <div class="pl-4 pr-4 pt-2 pb-2 border border-gray-200 border-dotted" style="font-size: 12px">
            <div class="pt-1 pb-5 ">品牌名称：<span style="font-size: 10px">vivo</span></div>
            <div class="text-gray-400 pb-5">产品参数：</div>
            <el-row :gutter="20">
              <el-col :span="8" class="leading-7 overflow-hidden whitespace-nowrap overflow-ellipsis">
                <div>证书编号：2021011606369214</div>
                <div>3C规格型号：V2055A（充电器：V6650L0A0-CN、V6650L0C0-CN 输出：5Vdc,2A 或...</div>
                <div>机身颜色: 夜影黑 云影蓝 像素橙</div>
                <div>网络模式: 双卡双待单通</div>
              </el-col>
              <el-col :span="8" class="leading-7 overflow-hidden whitespace-nowrap overflow-ellipsis">
                <div>证书状态：有效</div>
                <div>产品名称：vivo iQOO Neo5</div>
                <div>运行内存RAM: 8G、12G</div>
                <div>CPU型号: 高通骁龙870</div>
              </el-col>
              <el-col :span="8" class="leading-7 overflow-hidden whitespace-nowrap overflow-ellipsis">
                <div>产品名称：5G数字移动电话机</div>
                <div>型号: iQOO NEO5</div>
                <div>存储容量: 8+256GB 12+256GB 12+512GB</div>
              </el-col>
            </el-row>
          </div>
          <el-carousel height="300px" class="mt-4">
            <el-carousel-item>
              <img src="../assets/taobao/detailbar/1.jpg">
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/taobao/detailbar/2.jpg">
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/taobao/detailbar/3.jpg">
            </el-carousel-item>
          </el-carousel>
          <img src="../assets/taobao/detail/1.jpg"/>
          <img src="../assets/taobao/detail/2.jpg"/>
          <img src="../assets/taobao/detail/3.jpg"/>
          <img src="../assets/taobao/detail/4.jpg"/>
          <img src="../assets/taobao/detail/5.jpg"/>
          <img src="../assets/taobao/detail/6.jpg"/>
          <img src="../assets/taobao/detail/7.jpg"/>
          <img src="../assets/taobao/detail/8.jpg"/>
          <img src="../assets/taobao/detail/9.jpg"/>
          <img src="../assets/taobao/detail/10.jpg"/>
          <img src="../assets/taobao/detail/11.jpg"/>
          <img src="../assets/taobao/detail/12.jpg"/>
          <img src="../assets/taobao/detail/13.jpg"/>
          <img src="../assets/taobao/detail/14.jpg"/>
          <img src="../assets/taobao/detail/15.jpg"/>
          <img src="../assets/taobao/detail/16.jpg"/>
          <img src="../assets/taobao/detail/17.jpg"/>
          <img src="../assets/taobao/detail/18.jpg"/>
          <img src="../assets/taobao/detail/19.jpg"/>
          <img src="../assets/taobao/detail/20.jpg"/>
        </div>
        <div v-if="select==2">
          <DeP></DeP>
        </div>
        <div v-if="select==3">
          <Com></Com>
        </div>
      </el-col>
    </el-row>
    <br/>
    <br/>

  </div>
</template>

<script setup lang="ts">
import Header from "../views/header.vue"
import {ref, reactive, Ref} from "vue";
import {EluiChinaAreaDht} from "elui-china-area-dht";
import DeP from "../views/detailParams.vue"
import Com from "../views/Comment.vue"
import {useRouter} from "vue-router";

let $router = useRouter();
let select: Ref<number> = ref(1)

let color: Ref<string> = ref('')
let suit: Ref<string> = ref('')
let count: Ref<number> = ref(1)
let images: string[] = reactive([])
let uri: Ref<string> = ref('')
let topStyle: object = reactive({transform: ""})
let r_img: object = reactive({});
let r_show:Ref<boolean> = ref(false);
let isShow:Ref<boolean> = ref(false);
let normalPic:Ref<string> = ref("https://heavenpl.gitee.io/pic/normalPic/2.jpg");
let bigPic:Ref<string> = ref("https://heavenpl.gitee.io/pic/bigPic/1.jpg");
let smallPicStyle:Ref<number> = ref(1);
for (let i: number = 1; i <= 20; i++) {
  images[i] = "../assets/taobao/detail/" + i + '.jpg'
}
(function (){
  let top = document.documentElement.scrollTop || document.body.scrollTop;
  document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
})()
function goToIndex() {
  $router.push({
    name: 'index'
  })
}

function changeImg(picId:number) {
  smallPicStyle.value = picId;
  normalPic.value = "https://heavenpl.gitee.io/pic/normalPic/"+picId+'.jpg'
  bigPic.value = "https://heavenpl.gitee.io/pic/bigPic/"+picId+'.jpg'
}

function mouseOver() {
  r_show.value = true;
  isShow.value = true;
}
function mounseLeave() {
  r_show.value = false;
  isShow.value = false
}

function move(event: any) {
  let x: number = event.offsetX;
  let y: number = event.offsetY;
  // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
  let topX = x - 80 < 0 ? 0 : x - 80;
  let topY = y - 80 < 0 ? 0 : y - 80;
  // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
  if (topX > 182) {
    topX = 182;
  }
  if (topY > 182) {
    topY = 182;
  }
  // 通过 transform 进行移动控制
  topStyle.transform = `translate(${topX}px,${topY}px)`;
  r_img.transform = `translate(-${2 * topX+20}px,-${2 * topY+20}px)`;
}
</script>

<style scoped>
:deep(.is-active .el-radio-button__inner) {
  background-color: #fd7a72 !important;
  border: #fd7a72 solid 1px;
}

:deep(.is-active .el-radio-button__inner):hover {
  color: white;
}

:deep(.el-radio-button__inner):hover {
  color: #fd7a72;
}

.myBg {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
}

.maskTop {
  width: 380px;
  height: 380px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

</style>